<template>
    <div v-if="underClassAdsY && underClassAdsY.list && underClassAdsY.list.length > 0 && underClassAdsO && underClassAdsO.list && underClassAdsO.list.length > 0 && recommendStyle && recommendStyle.list && recommendStyle.list.length > 0 && popularTrend && popularTrend.list && popularTrend.list.length > 0">
        <!--轮播-->
        <van-swipe :autoplay="3000"
                   indicator-color="white" v-if="bannerList.list && bannerList.list.length > 0">
            <van-swipe-item v-for="(banner, index) in bannerList.list"
                            :key="index">
                <img :src="banner.url"
                     style="width: 100%">
            </van-swipe-item>
        </van-swipe>

        <div style="width: 100%;display: flex;flex-wrap:wrap;padding: 0 15px">
            <div v-for="(channel, index) in catetree" style="width: 20%;padding: 15px 10px 0px;">
                <div @click="changeTabbar(channel)" :key="index">
                    <img :src="channel.iconUrl"
                         style="width: 100%;border-radius: 50%">
                    <p style="text-align: center;color: #666666;font-size: 12px">{{channel.name}}</p>
                </div>
            </div>
        </div>

        <!--分类-->
        <van-row>
            <van-col span="24">
                <div class="goodspush">
                    <!--                    <div class="goodspush-left">-->
                    <!--                        <img src="./goodspushleft.png" alt="">-->
                    <!--                    </div>-->
                    <!--                    <div class="goodspush-right">-->
                    <!--                        <img src="./goodspushright.png" alt="">-->
                    <!--                    </div>-->
                    <van-col span="12" style="padding: 10px 10px 0px 10px">
                        <img :src="underClassAdsY.list[0].url"
                             style="width: 100%" @click="$router.push(`/items/detail/1181006`)">
                    </van-col>
                    <van-col span="12" style="padding: 10px 10px 0px 10px">
                        <div class="lrcont">
                            <img :src="underClassAdsY.list[1].url"
                                 style="width: 100%" @click="link(underClassAdsY.list[1].link)">
                        </div>
                    </van-col>
                    <van-col span="12">
                        <div class="bcont">
                            <img :src="underClassAdsO.list[0].url"
                                 alt="" @click="link(underClassAdsO.list[0].link)">
                        </div>
                    </van-col>
                    <van-col span="12">
                        <div class="bcont">
                            <img :src="underClassAdsO.list[1].url"
                                 alt="" @click="link(underClassAdsO.list[1].link)">
                        </div>
                    </van-col>
                </div>
            </van-col>
        </van-row>

        <!--流行趋势-->
        <P style="font-size: 20px; font-weight: bold;padding: 10px 10px 0 10px;color: #333333;">流行趋势</p>
        <P style="font-size: 12px;color: #cccccc;padding:  0 10px 0 10px">ELABORATE SELECTION</p>

        <van-row>
            <van-col span="24">
                <img :src="popularTrend.list[0].url"
                     alt="" style="width: 100%;margin-top: 10px" @click="link(popularTrend.list[0].link)">
            </van-col>
        </van-row>

        <P style="font-size: 20px; font-weight: bold;padding: 10px 10px 0 10px;color: #333333;">推荐风格</p>
        <P style="font-size: 12px;color: #cccccc;padding:  0 10px 0 10px">ELABORATE SELECTION</p>

        <van-row>
            <van-col span="24">
                <img :src="recommendStyle.list[0].url"
                     alt="" style="width: 100%;margin-top: 10px" @click="link(recommendStyle.list[0].link)">
            </van-col>
        </van-row>
        <div style="width: auto">

        </div>
        <P style="font-size: 20px; font-weight: bold;padding: 10px 10px 0 10px;color: #333333;">为你推荐</p>
        <P style="font-size: 12px;color: #cccccc;padding:  0 10px 0 10px">ELABORATE SELECTION</p>
        <van-row>
            <van-col span="12" v-for="(newGood ,index) in goodsList"
            >
                <div style=" padding:3px">
                    <div
                            :key="index"
                            style=" border-radius: 5px; background-color:#fff; overflow: hidden;padding: 5px"
                    >
                        <router-link :to="{ path: `/items/detail/${newGood.id}`}">
                            <img :src="newGood.picUrl" style="width: 100%;"/>
                            <p style="font-size: 15px; color: #333; font-weight: bold; padding: 10px 0px 5px 10px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">
                                {{newGood.name}}</p>
                            <div style="padding:10px 0px 5px 10px;position: relative;bottom: 10px; color:#ab956d; font-size: 13px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">
                                ￥{{newGood.retailPrice}}
                                <span v-show="newGood.modelPrice">+{{newGood.modelPrice}}</span>
                                <s style="color:#cccccc;float: right;position: relative;right: 1px;font-size: 12px">原价￥{{newGood.counterPrice}}</s>
                            </div>
                        </router-link>
                    </div>
                </div>

            </van-col>
        </van-row>

    </div>
</template>

<script>
    import {getHome, adPositionList} from '@/api/api';

    import {
        Swipe,
        SwipeItem,
    } from 'vant';

    export default {
        name: "jewelry",
        data() {
            return {
                shopInfos: [],
                catetree: [],
                goodsList: [],
                bannerList: {},//轮播
                underClassAdsY: {},//男生分类下广告位小
                underClassAdsO: {},//男生分类下广告位大
                popularTrend: {},//男生流行趋势
                recommendStyle: {},//男生推荐风格
            };
        },
        async created() {
            this.initViews();
            //轮播
            this.bannerList = await adPositionList(107);
            //男生分类下广告位小
            this.underClassAdsY = await adPositionList(108);
            //男生分类下广告位大
            this.underClassAdsO = await adPositionList(109);
            //男生流行趋势
            this.popularTrend = await adPositionList(110);
            //男生推荐风格
            this.recommendStyle = await adPositionList(111);
        },
        methods: {
            link(path) {
                const newPath = "http://" + path
                window.location.href = newPath
            },
            initViews() {
                getHome(
                    {
                        page: 1,
                        pageSize: 100
                    }
                ).then(res => {
                    this.shopInfos = res.data.data;
                    this.shopDetails = res.data.data
                    this.catetree = res.data.data.cateTree[1].children;
                    this.goodsList = res.data.data.goodsList[1];
                });
            },
        },
        components: {
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem,
        }
    }
</script>

<style scoped>
    .goods-channel {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding-top: 20px;
        /*padding-bottom: 10px;*/
    }

    .goods-channel .item {
        width: 80px;
        height: 80px;
        /*!*margin-left: -40px;*/
        position: relative;
        left: 50%;
        border-radius: 50%;
        /*padding-top: 10px;*/
    }

    .goods-channel img {
        display: block;
        width: 50px;
        height: 50px;
        margin: 0 auto;
    }

    .goods-channel span {
        display: block;
        font-size: 12px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
        color: #333;
    }

    .goodspush {
        height: 330px;
        margin-top: 20px;
        position: relative;
    }

    .goodspush-left {
        height: 100%;
        position: absolute;
        left: 0;
        z-index: -1;
    }

    .goodspush img {
        height: 100%;
    }

    .goodspush-right {
        height: 100%;
        position: absolute;
        right: 0;
        z-index: -1;
    }

    /*.lrcont {*/
    /*    width: 50%;*/
    /*    height: 100px;*/
    /*    position: absolute;*/
    /*    top: 5px;*/
    /*    z-index: 2;*/
    /*    padding: 5px;*/
    /*}*/
    .bcont {
        width: 50%;
        top: 100px;
        position: absolute;
        z-index: 2;
        padding: 10px;
        margin-top: 10px;
    }

    .bcont img {
        width: 100%;
        height: auto;
    }

</style>
